<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分类管理</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入element-UI样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../plugins/element-ui/icon/iconfont.css" />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="../css/category.css" />
    <link rel="stylesheet" href="../css/all.css" />
</head>
<body>
    <div class="container" id="category-app">
        <!-- 新增按钮 -->
        <div class="tableBar" style="display: inline-block">
            <el-button type="primary" @click="showFood()">+ 新增菜品分类</el-button>
            <el-button type="primary" @click="showCombo()">+ 新增套餐分类</el-button>
        </div>
        <!-- 新增菜品分类弹窗 -->
        <el-dialog title="新增菜品分类信息" :visible.sync="dialogFoodVisible" width="35%">
            <el-form class="demo-form-inline" label-width="100px" ref="foodData" :rules="rules" :model="foodData">
                <el-form-item label="分类名称：" prop="name">
                    <el-input v-model="foodData.name" placeholder="请输入菜品分类名称" maxlength="14"/>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input v-model="foodData.sort"  type="number" placeholder="请输入排序" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button size="medium" @click="dialogFoodVisible = false">取 消</el-button>
                    <el-button type="primary" size="medium" @click="submitFoodForm()">确 定</el-button>
                </span>
        </el-dialog>
        <!-- 新增套餐分类弹窗 -->
        <el-dialog title="新增套餐分类信息" :visible.sync="dialogComboVisible" width="35%" >
            <el-form class="demo-form-inline" label-width="100px" ref="comboData" :rules="rules" :model="comboData">
                <el-form-item label="分类名称：" prop="name">
                    <el-input v-model="comboData.name" placeholder="请输入套餐分类名称" maxlength="14"/>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input v-model="comboData.sort"  type="number" placeholder="请输入排序" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button size="medium" @click="dialogComboVisible= false">取 消</el-button>
                    <el-button type="primary" size="medium" @click="submitComboForm()">确 定</el-button>
                </span>
        </el-dialog>
        <!-- 表格 -->
        <el-table :data="tableData" stripe class="tableBox" height="450" :header-cell-style="{background:'#d3dce6',color:'#606266'}">
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="type" label="分类类型">
                <template slot-scope="scope">
                    <span>{{ scope.row.type == '1' ? '菜品分类': '套餐分类' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="操作时间">
                <template slot-scope="scope">
                    {{scope.row.updateTime}}
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="blueBug" @click="editHandle(scope.row.id)">修改</el-button>
                    <el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改分类弹窗 -->
        <el-dialog title="修改分类信息" :visible.sync="dialogUpdateVisible" width="35%" :fullscreen="true">
            <el-form class="demo-form-inline" label-width="100px" ref="updateData" :rules="rules" :model="updateData">
                <el-form-item label="分类名称：" prop="name">
                    <el-input v-model="updateData.name" placeholder="请输入分类名称" maxlength="14"/>
                </el-form-item>
                <el-form-item label="分类类型" prop="type">
                    <el-radio-group v-model="updateData.type">
                        <el-radio :label="1">菜品分类</el-radio>
                        <el-radio :label="2" >套餐分类</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input v-model="updateData.sort"  type="number" placeholder="请输入排序" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button size="medium" @click="dialogUpdateVisible= false">取 消</el-button>
                    <el-button type="primary" size="medium" @click="submitUpdateForm()">确 定</el-button>
                </span>
        </el-dialog>
        <el-pagination class="pageList"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :current-page.sync="currentPage"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</body>
    <!-- 引入VUE组件 -->
    <script src="../plugins/vue/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>
    <!-- 引入JS -->
    <script src="../js/category.js"></script>
</html>